import React, { useEffect, useRef } from 'react'
import styles from './index.module.css'
import { SearchBar, Dropdown, Button } from "antd-mobile"
import http from "../../utils/http"
import { useSelector, useDispatch } from "react-redux"
import { setWd } from '../../store/searchSlice'
import MyCard from '../../components/MyCard/MyCard'
import { setSearchResult } from '../../store/searchSlice'
import { useNavigate } from "react-router-dom"
function Index() {
  // 获取城市数据
  const nvaigate = useNavigate()
  const { wd, searchResult } = useSelector((state) => state.searchSlice)
  const dispatch = useDispatch()
  const searchHandel = async (wd) => {
    const result = await http.get("/api//city/search", { params: { wd } })
    dispatch(setSearchResult(result.data.data))
  }
  useEffect(() => {
    searchHandel()
  }, [])
  return (
    <div>
      <div className={styles.nav_search}>
        <div className={styles.btn}>
          <SearchBar onChange={(e) => dispatch(setWd(e))} placeholder="北京" style={{ '--background': '#ffffff', "--border-radius": "20px", "width": '80%', "--height": "30px" }} >
          </SearchBar>
          <Button color='primary' size='mini' onClick={() => searchHandel(wd)}>搜索</Button>
        </div>
      </div>
      <div>
        {
          searchResult.map((item, index) => <MyCard title={item.name} key={index}>
            
          </MyCard>)
        }
      </div>
    </div >
  )
}

export default Index
